<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <!-- 响应式布局 -->
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="./layui/css/layui.css">
    <title>addBook</title>
</head>

<body>

    <div class="layui-container" style="margin-top: 20px;">
        <div class="layui-row">
            <div class="layui-col-md6 layui-col-md-offset2">
                <!-- 给容器追加 class="layui-form-pane"，即可显示为方框风格 -->
                <form class="layui-form layui-form-pane">
                    <div class="layui-form-item">
                        <label class="layui-form-label">图书名称</label>
                        <div class="layui-input-block">
                            <input type="text" name="bookName" autocomplete="off" placeholder="请输入图书名称"
                                lay-verify="required" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">图书作者</label>
                        <div class="layui-input-block">
                            <input type="text" name="authorName" autocomplete="off" placeholder="请输入图书作者"
                                lay-verify="required" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">图书价格</label>
                        <div class="layui-input-block">
                            <input type="text" name="price" autocomplete="off" placeholder="请输入图书价格"
                                lay-verify="required" class="layui-input">
                        </div>
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">图书封面</label>
                        <div class="layui-input-block">
                            <div class="layui-upload-drag" style="display: block;" id="uploadPics">
                                <i class="layui-icon layui-icon-upload" style="color: #4476A7;"></i>
                                <div>点击上传，或将文件拖拽到此处</div>
                                <div class="layui-hide" id="uploadPicsPreview">
                                    <hr> <img src="" alt="上传成功后渲染" style="max-width: 100%">
                                </div>
                            </div>
                        </div>
                        <!-- 隐藏域 -->
                        <input type="hidden" name="bookAddress" id="bookAddress" />
                        <input type="hidden" name="bookUrl" id="bookUrl" />
                    </div>

                    <div class="layui-form-item">
                        <label class="layui-form-label">图书分类</label>
                        <div class="layui-input-inline">
                            <select name="categoryId" id="categoryId">
                            </select>
                        </div>
                    </div>

                    <div class="layui-form-item" pane>
                        <label class="layui-form-label">是否上架</label>
                        <div class="layui-input-block">
                            <input type="radio" name="status" value="1" title="上架" checked>
                            <input type="radio" name="status" value="0" title="下架">
                        </div>
                    </div>

                    <div class="layui-form-item" pane>
                        <label class="layui-form-label">创建时间</label>
                        <div class="layui-input-block">
                            <input type="text" class="layui-input" name="createTime" id="createTime"
                                placeholder="yyyy/MM/dd HH:mm:ss">
                        </div>
                    </div>

                    <div class="layui-form-item" style="text-align: center;">
                        <button class="layui-btn layui-btn-primary" lay-submit lay-filter="submitAdd"
                            style="background-color: #4476A7;color:aliceblue ;">添加</button>
                        <button type="reset" class="layui-btn layui-btn-primary"
                            style="background-color: #4476A7;color: aliceblue;">重置</button>
                    </div>
                </form>
            </div>

        </div>
    </div>

    <script src="./layui/layui.js"></script>
    <script>
        layui.use(function () {
            var laydate = layui.laydate;
            var $ = layui.$;
            var layer = layui.layer;
            var form = layui.form;
            var upload = layui.upload;

            //表单事件提交
            form.on("submit(submitAdd)", function (data) {

                //获取表单提交的数据
                var field = data.field;
                // console.log("field-------", field);

                //AJAX向后端发送请求
                $.ajax({
                    type: "post",
                    url: "http://localhost:8080/addBook",
                    data: JSON.stringify(field),//将field转成一个json
                    contentType: 'application/json',
                    dataType: 'json',
                    success: function (d) {
                        // console.log("d-------", d);
                        if (d.code == 0) {
                            //关闭弹出层
                            var index = parent.layer.getFrameIndex(window.name); // 先得到当前 iframe 层的索引
                            parent.layer.close(index); // 再执行关闭
                        } else {
                            layer.msg(d.msg);
                        }
                    }
                });

                //组织表单默认提交
                return false;
            });


            //图片上传
            upload.render({
                elem: '#uploadPics',
                url: 'http://localhost:8080/uploadFile', // 实际使用时改成您自己的上传接口即可。
                done: function (res) {
                    // console.log(res);

                    //将图片的服务器地址 和 本机的真实地址设置到对应的隐藏域中
                    $('#bookUrl').val(res.data.bookUrl);
                    $('#bookAddress').val(res.data.bookAddress);

                    $('#uploadPicsPreview').removeClass('layui-hide')
                        .find('img').attr('src', "http://localhost:8080" + res.data.bookUrl);
                }
            });

            //获取图书分类信息   $.getJSON("",请求参数，回调函数)
            $.getJSON("http://localhost:8080/getCategoryList", function (d) {
                // console.log('点击添加图书的时候，获取分类信息', d);

                if (d.code == 0) {
                    var list = d.data;

                    var s = '<option value="">请选择分类</option>';
                    for (var i = 0; i < list.length; i++) {
                        s += '<option value="' + list[i].categoryId + '">' + list[i].categoryName + '</option>';
                    }

                    // console.log('拼接字符串的信息', s);

                    //将拼接好的字符串设置到分类的位置
                    var b = $('#categoryId').html(s);
                    // console.log('将拼接好的字符串设置到分类的位置---', b);

                    //重新渲染表单的下拉框
                    form.render('select');
                } else {
                    layer.msg(d.msg);
                }

            });


            //生成时间控件
            laydate.render({
                elem: '#createTime',
                type: 'datetime',
                value: new Date(),
                format: 'yyyy/MM/dd HH:mm:ss'
            });
        })
    </script>
</body>

</html>